/*
 * @Author: Wilbur
 * @Date: 2019-01-18 09:30:17
 * @Last Modified by: ice
 * @Last Modified time: 2019-07-18 11:43:07
 */


<template>
    <div class="container supply-list-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20"
            >
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small"
                >
                    <el-col
                        class="filter-item"
                        :md="{ span: 24 }"
                        :sm="{ span: 24 }"
                    >
                        <el-input
                            v-model.trim="filterData.phone"
                            placeholder="请输入校园媒体手机号"
                            type="text"
                            size="small"
                            @keyup.native.enter="getTableData()"
                        />
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData()"
                        >搜索</el-button>
                        <el-button
                            type="primary"
                            style="float: right;"
                            @click="dialogCreateSupplyAccountFlag = true"
                            size="small">创建校园媒体账号</el-button>
                    </el-col>
                </el-form>

            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                >
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        :formatter="emptyFormatter"
                        prop="supply_no"
                        :min-width="150"
                        show-overflow-tooltip
                        label="校园媒体编号"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="nickname"
                        show-overflow-tooltip
                        label="昵称"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="true_name"
                        show-overflow-tooltip
                        label="真实姓名"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="phone"
                        width="120"
                        fixed="left"
                        show-overflow-tooltip
                        label="用户手机号"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="sex"
                        show-overflow-tooltip
                        label="性别">
                        <template slot-scope="scope">
                            <template v-if="scope.row.sex == 1">男</template>
                            <template v-if="scope.row.sex == 2">女</template>
                            <template v-if="scope.row.sex == 0">未知</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="money"
                        :min-width="90"
                        show-overflow-tooltip
                        label="金额（元）"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="login_count"
                        show-overflow-tooltip
                        label="登录次数"
                    />
                    <el-table-column
                        prop="login_time"
                        :min-width="150"
                        label="最近登录时间">
                        <template slot-scope="scope">
                            {{ scope.row.login_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        :min-width="150"
                        label="创建时间">
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        label="赠送记录"
                    >
                        <template slot-scope="scope">
                            <span
                                class="table-wraper-btn"
                                @click="fnLookResult(scope.row)">查看</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="150"
                    >
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    :disabled="!authResult.auth_detail"
                                    @click="handleRoute('resourceList', {keyword: scope.row.phone})"
                                >资源详情</el-button>
                                <el-button
                                    type="text"
                                    :disabled="!authResult.auth_send"
                                    @click="fnShowSendDialog(scope.row.supply_no)"
                                >赠送</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page.page_id"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
        <!-- 赠送弹窗 -->
        <el-dialog
            title="赠送"
            width="475px"
            @close="resetForm('ruleForm')"
            :visible.sync="showSendDialog">
            <el-form
                :model="sendForm"
                :rules="rules"
                ref="ruleForm"
                label-position="right"
            >
                <el-form-item
                    label="金额"
                    prop="money_change"
                    label-width="70px">
                    <el-input
                        v-model="sendForm.money_change"
                        type="number"
                        placeholder="正数为赠送，负数为扣款"
                        autocomplete="off"/>
                </el-form-item>
                <el-form-item
                    label="备注"
                    prop="remark"
                    label-width="70px">
                    <el-input
                        v-model="sendForm.remark"
                        autocomplete="off"/>
                </el-form-item>
                <el-form-item
                    label="合同编号"
                    prop="contract_no"
                    label-width="70px">
                    <el-input
                        v-model="sendForm.contract_no"
                        autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="resetForm('ruleForm')">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 创建校园媒体弹窗 -->
        <el-dialog
            title="创建校园媒体账号"
            width="500px"
            @close="resetForm('ruleFormSupply')"
            :visible.sync="dialogCreateSupplyAccountFlag">
            <el-form
                :model="formSupply"
                ref="ruleFormSupply"
                :rules="rulesSupplyAccount">
                <el-form-item
                    label="手机号"
                    prop="phone"
                    label-width="80px">
                    <el-input
                        v-model="formSupply.phone"
                        type="number"
                        autocomplete="off"/>
                </el-form-item>
                <el-form-item
                    label="昵称"
                    prop="nickname"
                    label-width="80px">
                    <el-input
                        v-model="formSupply.nickname"
                        autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="resetForm('ruleFormSupply')">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnSubmitSupplyAccount('ruleFormSupply')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        var validateMoney = (rule, value, callback) => {
            if (value == 0) {
                callback(new Error('请输入赠送金额'));
            } else if (value.indexOf('.') != -1 && value.toString().split('.')[1].length > 2) {
                callback(new Error('请输入正确的赠送金额'));
            } else {
                callback();
            }
        };
        let checkPhone = (rule, value, callback) => {
            let reg = /^1\d{10}$/;

            if (reg.test(value)) {
                this.errMsgPhone = '';
                return callback();
            } else {
                return callback(new Error('请输入正确的手机号'));
            }
        };

        return {
            authResult: {},
            showSendDialog: false,
            sendForm: {
                money_change: '',
                contract_no: '',
                remark: '赠送金额'
            },
            rules: {
                money_change: [
                    { required: true, message: '请输入赠送或者扣除金额', trigger: 'blur' },
                    { validator: validateMoney, trigger: 'blur' }
                ],
                contract_no: [
                    { required: true, message: '请输入合同编号', trigger: 'blur' }
                ],
                remark: [
                    { required: true, message: '请输入备注', trigger: 'blur' }
                ]
            },
            tableData: [],
            filterData: {
                phone: ''
            },
            supplyNo: '',
            page: {
                page_id: 1,
                total_count: 0,
                page_size: 0
            },
            currTime: 0,
            dialogCreateSupplyAccountFlag: false,
            formSupply: {
                phone: '',
                nickname: ''
            },
            rulesSupplyAccount: {
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkPhone, trigger: 'blur' }
                ]
            },

        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '校园媒体列表'
            }
        ]);
        this.filterData.phone = this.$route.query.phone ? this.$route.query.phone : '';
        this.getTableData(this.$route.query.page);
    },
    filters: {
        emptyFilter(val){
            if (!val) {
                return '--';
            }
            return val;
        }
    },
    methods: {
        fnSubmitSupplyAccount(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/wei4/supply_user%5Cadd', {
                        phone: this.formSupply.phone,
                        nickname: this.formSupply.nickname
                    }, resp => {
                        if (resp.code == 1) {
                            this.resetForm('ruleFormSupply');
                            this.getTableData();
                            this.$message({
                                type: 'success',
                                message: '操作成功',
                                center: true
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.fnSendMoney();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.showSendDialog = false;
            this.dialogCreateSupplyAccountFlag = false;
        },
        fnShowSendDialog(no) {
            this.supplyNo = no;
            this.showSendDialog = true;
        },
        fnSendMoney() {
            this.$post('/wei4/supply_user%5Cchange_money', {
                supply_no: this.supplyNo,
                money_change: this.sendForm.money_change,
                contract_no: this.sendForm.contract_no,
                remark: this.sendForm.remark,
            }, resp => {
                if (resp.code == 1) {
                    this.resetForm('ruleForm');
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        /**
       * 获取表格数据
       */
        getTableData(page) {
            let time = new Date().getTime();

            this.currTime = time;

            this.$router.replace({
                query: {
                    ...this.filterData,
                    page: page || this.page.page_id
                }
            });
            this.$post('/wei4/supply_user%5Cget_list', {
                ...this.filterData,
                page_id: page || this.page.page_id,
                page_size: 100,
            }, resp => {
                if(this.currTime != time){
                    return ;
                }
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.page_id = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    if (this.page.page_id > resp.data.page.total_page && this.page.page_id !== 1) {
                        this.getTableData(resp.data.page.total_page);
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 查看
         */
        fnLookResult (row) {
            this.$router.replace({
                name: 'financeList',
                query: {
                    phone: row.phone
                }
            });
        },
        /**
       * 跳转页面
       */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
       * 列表渲染辅助函数：列表项为空处理
       */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
      margin-left: 10px;
    }
  }
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }
  .filter-item {
    .el-form-item {
      margin-bottom: 0;
      white-space: nowrap;
    }
    .el-input {
      width: auto;
      vertical-align: middle;
    }
    .el-button {
      margin-left: 15px;
      vertical-align: middle;
    }
  }
  .table-wrapper {
    flex: 1;
    background-color: #fff;
    .table-wraper-btn {
        color: #409EFF;
        cursor: pointer;
    }
    .el-button {
      padding: 0;
    }
  }
  .pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
      float: right;
      padding: 0;
      background-color: transparent;
    }
  }

</style>
<style lang="less">
</style>
